<template>
  <placeholder :loading="fetching" :data="comments.length" @after-enter="loadCommentsAnimateDone">
    <template #loading>
      <ul class="comment-list-skeleton">
        <li v-for="item in (isMobile ? 3 : 5)" :key="item" class="item">
          <div class="gravatar">
            <skeleton-base />
          </div>
          <div class="content">
            <skeleton-paragraph :lines="4" />
          </div>
        </li>
      </ul>
    </template>
    <template #placeholder>
      <div class="list-empty">
        <span>期待你的捷足先登</span>
      </div>
    </template>
    <template #default>
      <transition-group
        name="list-fade"
        tag="ul"
        ref="listElement"
        class="comment-list"
        @after-enter="addCommentAnimateDone"
      >
        <comment-item
          v-for="comment in comments"
          :key="comment.id"
          :comment="comment"
          :liked="isCommentLiked(comment.id)"
          @like="likeComment"
          @reply="replyComment"
        />
      </transition-group>
    </template>
  </placeholder>
</template>

<script>
import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue'
import { useEnhandle } from "@/enhandle";
import { useCommentsLike } from '@/transforms/state'
import CommentItem from './item.vue'
import SkeletonBase from "@/components/skeleton/base.vue";
import SkeletonParagraph from "@/components/skeleton/paragraph.vue";
export default defineComponent({
  name: 'CommentList',
  components: {
    CommentItem,
    SkeletonBase,
    SkeletonParagraph
  },
  props: {
    fetching: {
      type: Boolean,
      default: false
    },
    comments: {
      type: Array,
      required: true
    }
  },
  setup(props, context) {
    const { store, isMobile } = useEnhandle()
    const { like: likeCommentStorage, isLiked: isCommentLiked } = useCommentsLike()

    const listElement = ref(null)
    // const lozadObserver = ref(null)

    // const observeLozad = () => {
    //   const lozadElements = (listElement.value?.$el)?.querySelectorAll(".lozad")
    //   if (lozadElements?.length) {
    //     lozadObserver.value = window.$lozad(lozadElements, {
    //       loaded: element => element.classList.add(LOADED_CLASS_NAME)
    //     })
    //     lozadObserver.value.observe()
    //   }
    // }

    const loadCommentsAnimateDone = () => {
      // observeLozad()
    }

    const addCommentAnimateDone = () => {
      // observeLozad()
    }

    const replyComment = (commentId) => {
      context.emit("reply", commentId)
    }

    const likeComment = async (commentId) => {
      if (isCommentLiked(commentId)) {
        return false
      }
      await store.dispatch("comment/fetchLikeComment", { id: commentId, type: "comment" })
      likeCommentStorage(commentId)
    }

    onMounted(() => {
      // observeLozad()
    })
    onBeforeUnmount(() => {
      // lozadObserver.value?.observer.disconnect()
      // lozadObserver.value = null
    })

    return {
      isMobile,
      listElement,
      loadCommentsAnimateDone,
      addCommentAnimateDone,
      isCommentLiked,
      likeComment,
      replyComment
    }
  }
})
</script>

<style lang="scss" scoped>
.comment-list-skeleton {
  padding: 0;

  .item {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: $lg-gap;

    .gravatar {
      width: 5rem;
      height: 5rem;
    }

    .content {
      width: calc((100% - 5rem) * 0.9);
    }
  }
}

.list-empty {
  color: $text-secondary;
  font-weight: bold;
  text-align: center;
  line-height: 8rem;
}

.comment-list {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
</style>
